import { Avatar, Col, Modal, Row, Tag } from 'antd';
import styles from './contextModal.less';
import robotImg from '../assets/kefu.png';
import customImg from '../assets/custom.png';
import React from 'react';

const ContextModal = props => {
  const [imgReviewVisible, setImgReviewVisible] = React.useState(false);
  const [reviewImgSrc, setReviewImgSrc] = React.useState('');

  const openGaller = src => {
    setReviewImgSrc(src);
    setImgReviewVisible(true);
  };

  const renderAnswers = item => {
    if (item) {
      if (item.indexOf('img') != -1) {
        let a = item.replace('img', 'img style=""');
        let ahref = a;
        if (item.indexOf('href') != -1) {
          let reg = new RegExp('href="', 'g');
          ahref = item.replace(reg, `target='_blank' href="`);
        };
        return (
          <div
            className={styles.customMessageItem}
            onClick={() => openGaller(ahref)}
            style={{ maxWidth: 388, wordBreak: 'break-word', paddingLeft: 2 }}
          >
            <div className={styles.bigImg} dangerouslySetInnerHTML={{ __html: ahref }} />
          </div>
        );
      } else if (item.indexOf('href') != -1) {
        let ahref = '';
        let reg = new RegExp('href="', 'g');
        ahref = item.replace(reg, `target='_blank' href="`);
        return (
          <div
            className={styles.customMessageItem}
            style={{ maxWidth: 388, wordBreak: 'break-word', paddingLeft: 2 }}
          >
            <div>
              <div dangerouslySetInnerHTML={{ __html: ahref }} />
            </div>
          </div>
        );
      }
    };
    
    return (
      <div
        className={styles.customMessageItem}
        style={{ maxWidth: 388, wordBreak: 'break-word', paddingLeft: 2 }}
      >
        <div>
          <div dangerouslySetInnerHTML={{ __html: item }} />
        </div>
      </div>
    );
  };

  return (
    <Modal
      title={'聊天上下文'}
      visible={props.visible}
      onCancel={props.cancelContextModal}
      footer={null}
      bodyStyle={{
        maxWidth: '600px',
        maxHeight: '60vh',
        overflow: 'auto',
      }}
      width={600}
      wrapClassName={styles.hideScroll}
    >
      {props.message.map((item, index) => {
        return (
          <div key={index}>
            {item.messageDirection === 'S' ? (
              <div style={{ textAlign: 'center' }}>{item.answer}</div>
            ) : (
              <>
                {item.question && item.question !== 'qizhi_welcome' ? (
                  <>
                    <div style={{ textAlign: 'center' }}>{item.time}</div>
                    <div className={styles.robotMessage} style={{ margin: '10px 0' }}>
                      <Row>
                        <Col span={2}>
                          <Avatar src={customImg} />
                          <Tag color={'#F59A23'} className={styles.tagLeft}>
                            客户
                          </Tag>
                        </Col>
                        <Col span={22} className={styles.clearfix}>
                          <div className={styles.leftContent}>
                            {/* <div className={styles.robotMessageItem}>{item.question}</div> */}
                            <div className={styles.robotMessageItem} dangerouslySetInnerHTML={{__html: `<div>${item.question}</div>`}} />
                          </div>
                        </Col>
                      </Row>
                    </div>
                    {item.answer ? (
                      <div className={styles.customMessage} style={{ margin: '10px 0' }}>
                        <Row>
                          <Col span={22} className={styles.clearfix}>
                            <div className={styles.rightContent}>
                              {renderAnswers(item.answer)}
                              {/*<div className={styles.customMessageItem} dangerouslySetInnerHTML={{ __html: item.answer }}></div>*/}
                            </div>
                          </Col>
                          <Col span={2}>
                            <Avatar src={robotImg} />
                            <Tag color={'#008FE0'} className={styles.tagRight}>
                              客服
                            </Tag>
                          </Col>
                        </Row>
                      </div>
                    ) : null}
                  </>
                ) : (
                  <>
                    {item.answer ? (
                      <>
                        <div style={{ textAlign: 'center' }}>{item.time}</div>
                        <div className={styles.customMessage} style={{ margin: '10px 0' }}>
                          <Row>
                            <Col span={22} className={styles.clearfix}>
                              <div className={styles.rightContent}>
                                {renderAnswers(item.answer)}
                                {/*<div className={styles.customMessageItem} dangerouslySetInnerHTML={{ __html: item.answer }}></div>*/}
                              </div>
                            </Col>
                            <Col span={2}>
                              <Avatar src={robotImg} />
                              <Tag color={'#008FE0'} className={styles.tagRight}>
                                客服
                              </Tag>
                            </Col>
                          </Row>
                        </div>
                      </>
                    ) : null}
                  </>
                )}
              </>
            )}
          </div>
        );
      })}
      <Modal
        bodyStyle={{
          maxHeight: '80vh',
          overflow: 'auto',
        }}
        width={'calc(80vw)'}
        className="modalovel"
        visible={imgReviewVisible}
        title="图片详情"
        onCancel={() => {
          setImgReviewVisible(false);
        }}
        footer={null}
      >
        {<div dangerouslySetInnerHTML={{ __html: reviewImgSrc }} />}
      </Modal>
    </Modal>
  );
};
export default ContextModal;
